/*
 * @Author: zhangzhen
 * @Date: 2022-12-30 09:13:41
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-02-28 17:02:52
 *
 */
import React, {FC, useCallback} from 'react';
import styles from './styles.module.scss';
import {
    InputOperate,
    SelectOperate,
    TableOperate,
    RadioAndCheckboxOperate,
    DateAndRangePickerOperate,
} from './operate';
import {FormItemType} from './main';

const Right: FC<any> = ({currentItem, isEdit}) => {
    const getCurrentOperateComponent = useCallback(() => {
        switch (currentItem.key) {
        case FormItemType.Input:
            return <InputOperate />;
        case FormItemType.InputNumber:
            return <InputOperate />;
        case FormItemType.TextArea:
            return <InputOperate />;
        case FormItemType.Select:
            return <SelectOperate />;
        case FormItemType.Radio:
            return <RadioAndCheckboxOperate />;
        case FormItemType.Checkbox:
            return <RadioAndCheckboxOperate />;
        case FormItemType.DatePicker:
            return <DateAndRangePickerOperate />;
        case FormItemType.RangePicker:
            return <DateAndRangePickerOperate />;
        case FormItemType.Table:
            return <TableOperate />;
    
        default:
            return null;
        }
    }, [currentItem]);

    return (
        <div
            className={styles.rightBox}
            style={
                isEdit ? {} : {pointerEvents: 'none', cursor: 'not-allowed'}
            }>
            {getCurrentOperateComponent()}
        </div>
    );
};

export default Right;
